<template>
	<view class="">
		<custom-nav/>
		<swiper :indicator-dots="true" indicator-active-color="#FFE32A">
			<swiper-item>
				<image src="https://mcake-oss.oss-cn-hangzhou.aliyuncs.com/file/2e22221caa3592f0/45baf897851f87f1.jpg" mode="widthFix"></image>
			</swiper-item>
			<swiper-item>
				<image src="https://mcake-oss.oss-cn-hangzhou.aliyuncs.com/file/76a7d2d04401e5d1/956085d38e2f298d.jpg" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<!-- 微信小程序 -->
		<!-- #ifdef MP-WEIXIN -->
		<tn-grid align="center" :col="4">
		  <block v-for="(item, index) in 4" :key="index">
			<tn-grid-item>
			  <view style="padding: 30rpx;">{{ item }}</view>
			</tn-grid-item>
		  </block>
		</tn-grid>
		<!-- #endif-->
		<HomeTitle cname="本季推荐" ename="Seasonal Recommend" :is-more="false"/>
		<scroll-view scroll-x >
			<view class="img-list">
				<image src="https://mcake-oss.oss-cn-hangzhou.aliyuncs.com/file/b9d378e1be959376/d943a30b6ebdaa1a.jpg" mode="heightFix"></image>
				<image src="https://mcake-oss.oss-cn-hangzhou.aliyuncs.com/file/a0de523d9c386a89/b387a82b971c54f6.jpg" mode="heightFix"></image>
				<image src="https://mcake-oss.oss-cn-hangzhou.aliyuncs.com/file/48632be97e13ccb2/a4e45a70e20999c0.jpg" mode="heightFix"></image>
			</view>
		</scroll-view>
		<HomeTitle/>
		<view class="cake-list flex flex-wrap justify-between">
			<cake-item v-for="item in cakeList" :gdata="item"/>
		</view>
		<cart-pop v-if="popShow"/>
	</view>
</template>

<script>
	import { cakeGet } from '../../api/cake'
	import HomeTitle from '../../components/home-title.vue'
	export default {
		components: {
			HomeTitle
		},
		data() {
			return {
				title: 'Hello',
				cakeList:[]
			}
		},
		computed: {
			popShow() {
				return this.$store.state.cart.popShow 
			}
		},
		async onLoad() {
			let res = await cakeGet()
			this.cakeList = res.data.results
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	swiper{
		height: 800upx;
		width: 100%;
		image{
			width: 750upx;
		}
	}
	.img-list{
		white-space: nowrap;
		image{
			height: 320upx;
		}
	}
</style>
